<template>
 <div class="yingmoo-shoppingcart">
    <ym-memberheader></ym-memberheader>
    <div class="yingmoo-memberbanner">
      <div class="nav">
        <div class="yingmoo-logo">
          <router-link tag="div" to="/"><img src="../assets/ym-member/yingmoo-logo.png" /></router-link>
          <p>购物车</p>
        </div>
        <el-steps :active="3" align-center>
          <el-step title="我的购物车"></el-step>
          <el-step title="提交订单"></el-step>
          <el-step title="确认订单"></el-step>
          <el-step title="上传合同"></el-step>
        </el-steps>
      </div>
    </div>
    <div class="message first">
      <h3>核对订单信息</h3>
      <ul>
        <li>用户名：<span>{{buyer.content_user}}</span></li>
        <li>联系电话：<span>{{buyer.mobile}}</span></li>
        <li>联系人：<span>{{buyer.content_name}}</span></li>
        <li>公司名称：<span>{{buyer.content_corp}}</span></li>
      </ul>
    </div>
    <div class="message">
      <h3>核对订单信息</h3>
      <ul>
        <li><input type="radio" checked="checked"/><span>线下支付</span></li>
      </ul>
    </div>
    <div class="indent-list">
      <ul class="indent-head">
        <li>媒体名称</li>
        <li>规格</li>
        <li>投放周期</li>
        <li>排期/执行时间</li>
        <li>执行价格</li>
        <li>操作</li>
      </ul>
      <div class="indent-odd" v-for="media in orders" :key="media">
        <div class="one">
          <div class="one-div">
            <label><img width="180px" height="117px" :src="media.cover" /></label>
          </div>
          <div class="two-div">
            <h1>{{media.mediaName}}</h1>
            <p>{{media.category}}</p>
            <p>{{media.area}}</p>
            <p>{{media.companyName}}</p>
          </div>
        </div>
        <div class="two">
          <p>{{media.width}}m * {{media.height}}m</p>
        </div>
        <div class="three">
          <p>{{media.cycle}}</p>
        </div>
        <div class="for">
          <div class="btn-date">{{media.startTime}}</div>
          <p>至</p>
          <div class="btn-date">{{media.endTime}}</div>
        </div>
        <div class="six">
          <p>{{media.price}}{{media.priceUnit}}</p>
          <p></p>
        </div>
        <div class="five">
          <p @click="deleteOne(media.cart_id)" style="cursor: pointer;">删除</p>
          <p class="color">移至我的收藏</p>
        </div>
        <div class="seven">
          <p>给媒体主留言</p>
          <div><input v-model="media.remark" type="text" placeholder="非必填，本次交易的补充说明" /><span>0/200</span></div>
        </div>
      </div>
      <ul class="content">
        <li>共<span>{{meidaNum}}</span>个媒体资源</li>
        <li>总金额：<span>0.00</span>元</li>
      </ul>
      <div class="indent-foot">
        <ul class="last">
          <li>
            <span>提交订单后，媒体主会在最短时间内，及时反馈信息给你，请注意查看。</span>
          </li>
          <el-button class="commit" type="text" @click="commitOrder">提交订单</el-button>
          <!--<router-link tag="li" to="/ymShoppingcartcommit">提交订单</router-link>-->
        </ul>
      </div>
    </div>
    <ym-detailsfooter></ym-detailsfooter>
 </div>
</template>
<script>
  import ymMemberheader from "@/components/ymMemberheader.vue";
  import ymDetailsfooter from "@/components/ymDetailsfooter.vue";
  export default {
    name: "yingmoo-media",
    components: {
      ymMemberheader,
      ymDetailsfooter
    },
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        user: {},
        buyer:'',
        orders: [],
        mediaData: {},
        meidaNum: 0,
        text: [{
          textheadline: '媒体标题媒体标题媒体标题',
          texttype: '机场媒体',
          textfrom: '灯箱',
          textlocation: '北京',
          textplace: '海淀区',
          textname: '媒体主公司名称',
          textsize: '13m*9m',
          textdeadline: '月',
          texttime: '2017-11-23',
          textoriginal: '￥880000.00',
          textprice: '￥880000.00',
          textstate: '删除',
          textbtn: '移至我的收藏'
        }, {
          textheadline: '媒体标题媒体标题媒体标题',
          texttype: '机场媒体',
          textfrom: '灯箱',
          textlocation: '北京',
          textplace: '海淀区',
          textname: '媒体主公司名称',
          textsize: '13m*9m',
          textdeadline: '月',
          texttime: '2017-11-23',
          textoriginal: '￥880000.00',
          textprice: '￥880000.00',
          textstate: '删除',
          textbtn: '移至我的收藏'
        }]
      }
    },
    mounted() {
      this.getUser();
    },
    methods: {
      getUser: function() {
        var data = localStorage.getItem("user");
        if (data != null) {
          this.user = JSON.parse(localStorage.getItem("user"));
          this.$http.post(this.requestAddr+"/Login/getUserInfo",{"userId":this.user.autoId},{emulateJSON:true}).then(
          	(res)=>{
          		this.buyer = res.data.buyer
          	}
          )
          this.getOrders();
        }
      },
      getOrders: function() {
      	var cartsId = sessionStorage.getItem("carts")
      	var ids = cartsId.split(',')
      	this.$http.post(this.requestAddr+"/GetJson/getOrderMedia",{"cartsId":ids},{emulateJSON:true}).then(
      		(res)=>{
      			this.orders = res.data.orders;
      			this.meidaNum = (this.orders).length;
      			console.log(this.orders)
      			for(var i=0; i<(this.orders).length; i++){
	            	var startTime = (this.orders[i].startTime).toString();
	            	var endTime = (this.orders[i].endTime).toString();
	            	this.orders[i].startTime = startTime.substring(0,10);
	            	this.orders[i].endTime = endTime.substring(0,10);
	            }
      		}
      	)
      },
      //删除单条数据
		deleteOne:function(cartId){
			this.$confirm('确认删除该商品吗？', '删除提示', {
		      confirmButtonText: '确定',
		      cancelButtonText: '取消',
		      type: 'warning' 
			}).then(
				()=>{
					console.log(cartId);
					this.$http.post(this.requestAddr+"/GetJson/AdOrders/deleteMediaFromCart",{"cartId":cartId},{emulateJSON:true}).then(
						(res)=>{
							this.getOrders();
						}
					)
				}
			)
		},
      commitOrder: function() {
      	var cartsId = (sessionStorage.getItem("carts")).split(',')
      	var user = JSON.parse(localStorage.getItem("user"))
      	this.$http.post(this.requestAddr+"/GetJson/createOrder",{"cartIds":cartsId,"advertiserId":user.autoId},{emulateJSON:true}).then(
			(res)=>{
				if(res.data.code == 0){
					this.open6();
				}
			}
		)
      },
      open6(msg) {
          this.$confirm(msg, '订单提交成功！', {
            confirmButtonText: '查看订单',
            cancelButtonText: '返回首页',
            type: 'success',
            center: true
          }).then(
          	(res)=>{
          		window.location.href="../#/ymMemberorder"
          	}
          )
      }
      
    }
  }

</script>
<style>
  .el-steps {
    width: 380px;
    height: 20px;
    align-items: center;
  }

  .el-step__icon {
    width: 22px;
    height: 22px;
  }

  .el-step__title {
    font-size: 12px;
    line-height: 25px;
  }

  .el-step__title.is-process {
    color: #c0c4cc;
  }

  .el-step__icon.is-text {
    color: white;
    background-color: #1b8cd9;
  }

  .el-step__head.is-process {
    border-color: #1b8cd9;
  }

  .el-step__head.is-wait {
    border-color: #1b8cd9;
  }

  .el-step__head.is-finish {
    border-color: #f29600;
  }

  .el-step__title.is-finish {
    color: #f29600;
  }

</style>
<style scoped lang="less">
  .yingmoo-shoppingcart {
    background-color: #f3f9ff;
    .yingmoo-memberbanner {
      width: 100%;
      height: 62px;
      background-color: #036eb7;
      .nav {
        width: 1200px;
        height: 62px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .yingmoo-logo {
          width: 252px;
          height: 43px;
          display: flex;
          justify-content: space-between;
          p {
            color: #6998d4;
            font-size: 14px;
            line-height: 43px;
          }
        }
      }
    }
    .first {
      margin-top: 25px !important;
    }
    .message {
      width: 1200px;
      margin: 0 auto;
      h3 {
        height: 38px;
        line-height: 38px;
        font-size: 14px;
        color: #666666;
        background-color: #f2f2f2;
        padding-left: 15px;
      }
      ul {
        display: flex;
        height: 56px;
        background-color: white;
        line-height: 56px;
        padding-left: 15px;
        font-size: 14px;
        color: #666666;
        li {
          margin-right: 40px;
          input {
            width: 25px;
          }
        }
      }
    }
    .indent-list {
      width: 1200px;
      margin: 0 auto;
      background-color: white;
      .indent-head {
        width: 1200px;
        height: 42px;
        font-size: 16px;
        display: flex;
        background-color: #f2f2f2;
        li {
          text-align: center;
          line-height: 42px;
          color: #666666;
          &:nth-child(1) {
            width: 470px;
          }
          &:nth-child(2) {
            width: 160px;
          }
          &:nth-child(3) {
            width: 100px;
          }
          &:nth-child(4) {
            width: 145px;
          }
          &:nth-child(5) {
            width: 170px;
          }
          &:nth-child(6) {
            width: 155px;
          }
        }
      }
      .indent-odd {
        height: 215px;
        border-bottom: 1px solid #f2f2f2;
        .one {
          float: left;
          width: 470px;
          display: flex;
          align-items: center;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          .one-div {
            display: flex;
            align-items: center;
            input {
              margin-left: 25px;
            }
            label {
              margin-left: 10px;
            }
          }
          .two-div {
            width: 185px;
            font-size: 14px;
            line-height: 32px;
            padding-left: 30px;
            h1 {
              font-weight: bold;
              margin-top: 10px;
              white-space:nowrap;
			  overflow:hidden;
			  text-overflow:ellipsis;
            }
            p {
              color: #999999;
            }
          }
        }
        .two {
          float: left;
          width: 160px;
          line-height: 142px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p {
            color: #999999;
            font-size: 14px;
            text-align: center;
          }
        }
        .three {
          float: left;
          width: 100px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p {
            width: 100%;
            font-size: 14px;
            color: #999999;
            text-align: center;
            line-height: 142px;
          }
        }
        .for {
          float: left;
          width: 145px;
          color: #999999;
          font-size: 14px;
          text-align: center;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          .btn-date {
            width: 123px;
            height: 28px;
            line-height: 28px;
            border: 1px solid #dddddd;
            margin: 0 auto;
            border-radius: 3px;
            &:nth-child(1) {
              margin-top: 25px;
            }
          }
          p {
            line-height: 30px;
          }
        }
        .five {
          float: left;
          width: 170px;
          text-align: center;
          color: #999999;
          font-size: 14px;
          p {
            text-align: center;
            &:nth-child(1) {
              color: #999999;
              margin-top: 33px;
              line-height: 50px;
            }
            &:nth-child(2) {
              color: #f39e26;
              font-weight: bold;
            }
          }
        }
        .six {
          float: left;
          width: 155px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p {
            text-align: center;
            &:nth-child(1) {
              text-decoration: line-through;
              color: #999999;
              margin-top: 33px;
              line-height: 50px;
            }
            &:nth-child(2) {
              color: #f39e26;
              font-weight: bold;
            }
          }
        }
        .seven {
          height: 70px;
          clear: both;
          display: flex;
          align-items: center;
          p {
            font-size: 14px;
            color: #333333;
            margin-left: 25px;
            margin-right: 25px;
          }
          div {
            width: 1000px;
            height: 35px;
            border: 1px solid #dddddd;
            input {
              width: 935px;
              height: 30px;
              border: none;
              outline: none;
              font-size: 14px;
              padding-left: 15px;
            }
            span {
              color: #999999;
              line-height: 35px;
              font-size: 14px;
            }
          }
        }
      }
      .content {
        li {
          line-height: 60px;
          font-size: 14px;
          color: #999999;
          &:nth-child(1) {
            float: left;
            margin-left: 840px;
            span {
              color: #f29600;
              font-weight: bold;
              font-size: 18px;
            }
          }
          &:nth-child(2) {
            float: right;
            margin-right: 40px;
            span {
              color: #f29600;
              font-weight: bold;
              font-size: 18px;
            }
          }
        }
      }
      .indent-foot {
        width: 1200px;
        height: 46px;
        clear: both;
        .last {
          width: 1200px;
          height: 46px;
          background-color: #f2f2f2;
          line-height: 46px;
          margin: 0 auto;
          display: flex;
          margin-top: 18px;
          li {
            font-size: 14px;
            color: #666666;
            margin-left: 30px;
            cursor: pointer;
            &:nth-child(1) {
              margin-left: 395px;
              span {
                color: #f29600;
                font-weight: bold;
                font-size: 18px;
              }
            }
          }
          .commit {
            width: 130px;
            height: 46px;
            background-color: #f29600;
            color: white;
            font-weight: bold;
            font-size: 18px;
            text-align: center;
            margin-left: 60px;
            &:hover {
              color: #8e5800;
            }

          }

        }

      }
    }

  }

</style>
